<template>
  <div class="content">
    <div  style="
          width: 100%;height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
          :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title" v-if="fairActive===2">总注册人数</div>
            <div class="title" v-else-if="fairActive===3">总访问人数</div>
            <div class="title" v-else-if="fairActive===4">企业注册数</div>
            <div class="title" v-else-if="fairActive===5">岗位总数</div>
            <div class="title" v-else-if="fairActive===6">匹配成功数</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
        <div class="cover-tab" style="margin: 40px auto">
          <div class="amount" :class="fairActive===2?'active':''" @click="fairActive=2">总注册人数</div>
          <div class="already" :class="fairActive===3?'active':''" @click="fairActive=3">总访问人数</div>

          <div class="without" :class="fairActive===4?'active':''" @click="fairActive=4" style="border-right: 1px solid #31A7FF;">企业注册数</div>
          <div class="without" :class="fairActive===5?'active':''" @click="fairActive=5" style="border-right: 1px solid #31A7FF;">岗位总数</div>
          <div class="without" :class="fairActive===6?'active':''" @click="fairActive=6" style="border-right: 1px solid #31A7FF;">匹配成功数</div>
        </div>
        <template v-if="fairActive==2">
<!--          <div class="cover-middle">-->
<!--            统计时间：-->
<!--            <div class="begin">2023/01/01</div>-->
<!--            至-->
<!--            <div class="over">2023/07/23</div>-->
<!--          </div>-->
          <div class="cover-bottom">
            <div class="region-item" v-for="item in list" :key="item.id" @click="oncloseDialog1(item.id,item.name)">
              <div class="name">{{ item.name }}</div>
              <div class="count">{{ item.count }}</div>
              人
            </div>
          </div>
        </template>
        <template v-if="fairActive==3">
<!--          <div class="cover-middle">-->
<!--            统计时间：-->
<!--            <div class="begin">2023/01/01</div>-->
<!--            至-->
<!--            <div class="over">2023/07/23</div>-->
<!--          </div>-->
          <div class="cover-bottom">
            <div class="region-item" v-for="item in list1" :key="item.id" >
              <div class="name">{{ item.name }}</div>
              <div class="count">{{ item.count }}</div>
              人
            </div>
          </div>
        </template>
        <template v-if="fairActive==4">
<!--          <div class="cover-middle">-->
<!--            统计时间：-->
<!--            <div class="begin">2023/01/01</div>-->
<!--            至-->
<!--            <div class="over">2023/07/23</div>-->
<!--          </div>-->
          <div class="cover-bottom">
            <div class="region-item" v-for="item in list2" :key="item.id" @click="oncloseDialog3(item.id,item.name)">
              <div class="name">{{ item.name }}</div>
              <div class="count">{{ item.count }}</div>
              个
            </div>
          </div>
        </template>
        <template v-if="fairActive==5">
<!--          <div class="cover-middle">-->
<!--            统计时间：-->
<!--            <div class="begin">2023/01/01</div>-->
<!--            至-->
<!--            <div class="over">2023/07/23</div>-->
<!--          </div>-->
          <div class="cover-bottom">
            <div class="region-item" v-for="item in list3" :key="item.id" @click="oncloseDialog2(item.id,item.name)">
              <div class="name">{{ item.name }}</div>
              <div class="count">{{ item.count }}</div>
              个
            </div>
          </div>
        </template>
        <template v-if="fairActive==6">
<!--          <div class="cover-middle">-->
<!--            统计时间：-->
<!--            <div class="begin">2023/01/01</div>-->
<!--            至-->
<!--            <div class="over">2023/07/23</div>-->
<!--          </div>-->
          <div class="cover-bottom">
            <div class="region-item" v-for="item in list4" :key="item.id" @click="oncloseDialog4(item.id,item.name)">
              <div class="name">{{ item.name }}</div>
              <div class="count">{{ item.count }}</div>
              人
            </div>
          </div>
        </template>
      </div>
    </div>
    <Cover4  v-if="closeDialog1" :id="fatherId" :type="fairActive" :closeDialog1="close" :name="name"></Cover4>
    <CoverCom4  v-if="closeDialog3" :id="fatherId" :closeDialog3="close3" :name="name" :title="title"></CoverCom4>
    <CoverJob4  v-if="closeDialog2" :id="fatherId" :closeDialog2="close2" :name="name" :title="title"></CoverJob4>
    <CoverJob5  v-if="closeDialog4" :id="fatherId" :closeDialog4="close4" :name="name" :title="title"></CoverJob5>
  </div>
</template>

<script>
import Cover4 from "@/components/Cover/Cover-4.vue";
import CoverCom4 from "@/components/Cover/CoverCom-4.vue";
import CoverJob4 from "@/components/Cover/CoverJob-4.vue";
import CoverJob5 from "@/components/Cover/CoverJob-5.vue";
export default {
  name: "CoverOne",
  components:{
    CoverCom4,
    CoverJob4,
    CoverJob5,
    Cover4
  },
  data() {
    return{
      closeDialog1: false,
      closeDialog3: false,
      closeDialog2: false,
      closeDialog4: false,
      fatherId: 0,
      count: 2,
      page: 1,
      limit: 6,
      fairActive: 2,
      title:'',
      isShow: true,
      list: [
        {
          id: 1,
          name: '肃州区',
          count: 1024,
        },
        {
          id: 2,
          name: '金塔县',
          count: 1024,
        },
        {
          id: 3,
          name: '瓜州县',
          count: 1024,
        },
        {
          id: 4,
          name: '玉门市',
          count: 1024,
        },
        {
          id: 5,
          name: '敦煌市',
          count: 1024,
        },
        {
          id: 6,
          name: '肃北县',
          count: 1024,
        },
        {
          id: 7,
          name: '阿克塞县',
          count: 1024,
        }
      ],
      list1: [
        {
          id: 1,
          name: '肃州区',
          count: 1000,
        },
        {
          id: 2,
          name: '金塔县',
          count: 1000,
        },
        {
          id: 3,
          name: '瓜州县',
          count: 1000,
        },
        {
          id: 4,
          name: '玉门市',
          count: 1000,
        },
        {
          id: 5,
          name: '敦煌市',
          count: 1000,
        },
        {
          id: 6,
          name: '肃北县',
          count: 1000,
        },
        {
          id: 7,
          name: '阿克塞县',
          count: 1000,
        }
      ],
      list2: [
        {
          id: 1,
          name: '肃州区',
          count: 24,
        },
        {
          id: 2,
          name: '金塔县',
          count: 24,
        },
        {
          id: 3,
          name: '瓜州县',
          count: 24,
        },
        {
          id: 4,
          name: '玉门市',
          count: 24,
        },
        {
          id: 5,
          name: '敦煌市',
          count: 24,
        },
        {
          id: 6,
          name: '肃北县',
          count: 24,
        },
        {
          id: 7,
          name: '阿克塞县',
          count: 24,
        }
      ],
      list3: [
        {
          id: 1,
          name: '肃州区',
          count: 41,
        },
        {
          id: 2,
          name: '金塔县',
          count: 41,
        },
        {
          id: 3,
          name: '瓜州县',
          count: 41,
        },
        {
          id: 4,
          name: '玉门市',
          count: 41,
        },
        {
          id: 5,
          name: '敦煌市',
          count: 41,
        },
        {
          id: 6,
          name: '肃北县',
          count: 41,
        },
        {
          id: 7,
          name: '阿克塞县',
          count: 41,
        }
      ],
      list4: [
       {
         id: 1,
         name: '肃州区',
         count: 30,
       },
       {
         id: 2,
         name: '金塔县',
         count: 30,
       },
       {
         id: 3,
         name: '瓜州县',
         count: 30,
       },
       {
         id: 4,
         name: '玉门市',
         count: 30,
       },
       {
         id: 5,
         name: '敦煌市',
         count: 30,
       },
       {
         id: 6,
         name: '肃北县',
         count: 30,
       },
       {
         id: 7,
         name: '阿克塞县',
         count: 30,
       }
     ]
    }
  },
  props:['id','closeDialog','countList'],
  methods:{
    oncloseDialog3(e,name)
    {
      this.closeDialog3 = true
      this.fatherId = e
      this.name=name
      this.title='企业注册数'

    },
    oncloseDialog4(e,name)
    {
      this.closeDialog4 = true
      this.fatherId = e
      this.name=name
      this.title='匹配成功数'
    },
    oncloseDialog1(e,name)
    {
      this.closeDialog1 = true
      this.fatherId = e
      this.name=name

    },
    oncloseDialog2(e,name)
    {
      this.closeDialog2 = true
      this.fatherId = e
      this.name = name
      this.title = '全部岗位'
    },
    onCloseDialog(item)
    {
      this.closeDialog(0)
      // this.id(1)
    },
    close3(){
      this.closeDialog3 = false
    },
    close2(){
      this.closeDialog2 = false
    },
    close(){
      this.closeDialog1 = false
    },
    close4(){
      this.closeDialog4 = false
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList()
    },
    assignment(){
      this.list[0].count = this.countList.suzhouCount.customerCount
      this.list[1].count = this.countList.jintaCount.customerCount
      this.list[2].count = this.countList.guazhouCount.customerCount
      this.list[3].count = this.countList.yumenCount.customerCount
      this.list[4].count = this.countList.dunhuangCount.customerCount
      this.list[5].count = this.countList.subeiCount.customerCount
      this.list[6].count = this.countList.akesaiCount.customerCount
      this.list1[0].count = this.countList.suzhouCount.browseCount
      this.list1[1].count = this.countList.jintaCount.browseCount
      this.list1[2].count = this.countList.guazhouCount.browseCount
      this.list1[3].count = this.countList.yumenCount.browseCount
      this.list1[4].count = this.countList.dunhuangCount.browseCount
      this.list1[5].count = this.countList.subeiCount.browseCount
      this.list1[6].count = this.countList.akesaiCount.browseCount
      this.list2[0].count = this.countList.suzhouCount.enterpriseCount
      this.list2[1].count = this.countList.jintaCount.enterpriseCount
      this.list2[2].count = this.countList.guazhouCount.enterpriseCount
      this.list2[3].count = this.countList.yumenCount.enterpriseCount
      this.list2[4].count = this.countList.dunhuangCount.enterpriseCount
      this.list2[5].count = this.countList.subeiCount.enterpriseCount
      this.list2[6].count = this.countList.akesaiCount.enterpriseCount
      this.list3[0].count = this.countList.suzhouCount.jobCount
      this.list3[1].count = this.countList.jintaCount.jobCount
      this.list3[2].count = this.countList.guazhouCount.jobCount
      this.list3[3].count = this.countList.yumenCount.jobCount
      this.list3[4].count = this.countList.dunhuangCount.jobCount
      this.list3[5].count = this.countList.subeiCount.jobCount
      this.list3[6].count = this.countList.akesaiCount.jobCount
      this.list4[0].count = this.countList.suzhouCount.deliveryCount
      this.list4[1].count = this.countList.jintaCount.deliveryCount
      this.list4[2].count = this.countList.guazhouCount.deliveryCount
      this.list4[3].count = this.countList.yumenCount.deliveryCount
      this.list4[4].count = this.countList.dunhuangCount.deliveryCount
      this.list4[5].count = this.countList.subeiCount.deliveryCount
      this.list4[6].count = this.countList.akesaiCount.deliveryCount
    }
  },
  mounted() {
    this.assignment()
    this.fairActive = this.id
    this.type=this.id
  }
}
</script>

<style lang="scss" scoped>
.content{
  .cover{
    position: relative;
    width: 52%;
    min-height: 70%;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;
    .cover-tab{
      display: flex;
      width: 70%;
      border: 1px solid #31A7FF;
      margin: 0 auto;
      cursor: pointer;
      .amount{
        width: 30%;
        color: #fff;
        border-right: 1px solid #31A7FF;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
      .amount.active{
        background-color: #02A9EC;
      }
      .already{
        width: 37%;
        color: #fff;
        border-right: 1px solid #31A7FF;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
      .already.active{
        background-color: #02A9EC;
      }
      .without{
        width: 37%;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-right: 1px solid #31A7FF;
      }
      .without.active{
        background-color: #02A9EC;
      }
    }
    .cover-top{
      display: flex;
      justify-content: space-between;
      .top-left{
        display: flex;
        .sign{
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }
        .title{
          color: #ffffff;
        }
      }
      .top-right{
        color: #2FA1F9;
        font-size: 20px;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    .cover-middle{
      display: flex;
      margin: 30px 0 30px 82px;
      //justify-content: center;
      color: #fff;
      .begin{
        width: 120px;
        border: 1px solid #31A6FE;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        margin-right: 15px;
      }
      .over{
        width: 120px;
        border: 1px solid #31A6FE;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        margin: 0 15px;
      }
    }
    .cover-bottom{
      display: flex;
      flex-wrap: wrap;
      width: 83%;
      height: 60%;
      margin: 0 auto;
      border-radius: 5px;
      .region-item{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((100% - 30px)/3);
        height: 30%;
        background-color: #164088;
        border-radius: 5px;
        color: #fff;
        margin-right: 10px;
        border: 1px solid #31A7FF;
        cursor: pointer;
        .name{
          color: #fff;

        }
        .count{
          color: #50FFC1;
          font-size: 30px;
          margin: 0 5px 10px 5px;
        }
      }
    }
  }
}
</style>


